<template>
	<el-image v-bind="props" class="bg-[rgba(0,0,0,0.1)]" v-on="events">
		<template #error>
			<div class=".flex-c bg-[rgba(0,0,0,0.1)]">
				<el-icon :size="size" color="rgba(0,0,0,0.6)">
					<icon-picture />
				</el-icon>
			</div>
		</template>
	</el-image>
</template>
<script setup lang="ts">
import { Picture as IconPicture } from '@element-plus/icons-vue';
/** 使用本组件时，需要通过样式定义组件高度宽度 */
const instance = getCurrentInstance();
type ImageProps = {
	appendToBody?: boolean;
	src?: string;
	fit?: '' | 'fill' | 'none' | 'contain' | 'cover' | 'scale-down';
	lazy?: boolean;
	scrollContainer?: string | HTMLElement;
	previewSrcList?: string[];
	zIndex?: 2000 | number;
};
type ImageEmits = {
	(event: 'error', evt: Event): void;
	(event: 'switch', val: number): void;
	(event: 'close'): void;
};
const props = defineProps<ImageProps>();

const emit = defineEmits<ImageEmits>();
const events = {
	error: (evt: Event) => emit('error', evt),
	switch: (val: number) => emit('switch', val),
	close: () => emit('close'),
};
const size = ref(32);
onMounted(() => {
	const el = instance?.proxy?.$el as HTMLElement | undefined;
	if (el)
		size.value = Math.max(
			Math.ceil(Math.min(el.offsetWidth, el.offsetHeight) * 0.2),
			32
		);
});
</script>
